<template>
    <div class="myChart">
        <span
            style="color:white;font-size: 14px;font-weight: bold;font-style: italic;letter-spacing: 2px;margin-left: 10%;">指标异常报警</span>
        <img src="../../assets/images/divide.png" alt="" style="width: 100%;">
        <dv-charts :option="option" style="width: 100%;height: 80%;" />
        <img src="../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
    </div>
</template>

<script>
import { variableAlarm } from '../../api/oil/statistic';
export default {
    name: 'VariableAlarmCount',
    data() {
        return {
            myChart: '',
            option: {},
            optionConfig: {
                title: {
                    show: false,
                    text: ""
                },
                xAxis: {
                    name: '',
                    data: 'value',
                    min: 0,
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        style: {
                            fill: '#fff'
                        }
                    },
                    axisLine: {
                        show: false
                    }
                },
                yAxis: {
                    name: '',
                    // data: ['非铁磁颗粒', '铁磁颗粒', '含水量', '40℃运动粘度', '介电常数', '密度', '温度'],
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        style: {
                            fill: '#fff',
                            fontSize: 12
                        },
                        formatter:(params=> {
                            var str = "";
                            params = params.value;
                            var paramsLen = params.length; // 获取文字长度
                            var len = 8; // 每行显示的文字个数（根据实际情况调整）
                            var rowNumber = Math.ceil(paramsLen / len); // 换行所需的行数
                            if (paramsLen > len) {
                                for (var i = 0; i < rowNumber; i++) {
                                    var temp = "";
                                    var start = i * len;
                                    var end = start + len;
                                    if (i === rowNumber - 1) {
                                        temp = params.substring(start, paramsLen);
                                    } else {
                                        temp = params.substring(start, end) + "\n";
                                    }
                                    str += temp;
                                }
                            } else {
                                str = params;
                            }
                            console.log(str);
                            return str;
                        })
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        style: {
                            stroke: '#fdfdfd',
                            lineWidth: 1
                        }
                    }
                },
                grid: {
                    left: '20%',
                    bottom: '8%',
                    top: '2%',
                },
                series: [
                    {
                        // data: [4200, 3230, 2900, 2100, 1500, 1200, 985],
                        type: 'bar',
                        barWidth: '102%',
                        barStyle: {
                            fill: '#326ed7'
                        },
                        itemStyle: {

                        }
                    }
                ]
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            var query = {
                startDate: '2024-07-01',
                endDate: '2024-12-31'
            };
            variableAlarm(query).then(res => {
                var data = res.data;
                console.log(data);
                var names = data.map(obj => obj.variable_name);
                var values = data.map(obj => obj.alarm_count);
                this.optionConfig.yAxis.data = names;
                this.optionConfig.series[0].data = values;
                this.option = this.optionConfig;
            });
        }
    },
    mounted() {
        // Add your mounted logic here
    }
};
</script>

<style scoped></style>